<template>
  <div id="lang">
    <NavBar title="语言选择" />
    <div class="langBox">
      <div
        :class="active == index ? 'lang active' : 'lang'"
        @click="clickLang(index)"
        v-for="(item, index) in lang"
        :key="index"
      >
        {{ item }}
      </div>
    </div>
     <div>国际化语言： {{ $t('m.test') }}</div>      
  </div>
</template>

<script>
import NavBar from '@/components/navbar'
export default {
  components: {
    NavBar
  },
  data() {
    return {
      active: localStorage.getItem('langIndex') || 2, //选中的语言
      lang: [
        '简体',
        '繁体',
        '英文',
        '日语',
        '越语',
        '韩语',
        '泰语',
        '德语',
        '法语',
        '西班牙语'
      ],
      langSimple: [
        'zh-cn',
        'zh-hk',
        'en',
        'ja',
        'vi',
        'ko',
        'th',
        'de',
        'fr',
        'es'
      ]
    }
  },
  methods: {
    // 切换语言
    clickLang(index) {
      this.active = index
      localStorage.setItem('lang', this.langSimple[index])
      localStorage.setItem('langIndex', index)
      this.$i18n.locale = this.langSimple[index]
    }
  }
}
</script>

<style lang="less" scoped>
#lang {
  .langBox {
    padding: 15px;
    .lang {
      font-size: 16px;
      line-height: 40px;
      height: 40px;
      margin-bottom: 10px;
      text-align: center;
      color: #333;
      background-image: linear-gradient(#fff, #e8e8e8);
      border: solid 1px #e5e5e5;
      -webkit-border-radius: 5px;
      border-radius: 5px;
    }
    .active {
      order: -1;
      background: #3c475c;
      color: #fff;
      border: solid 1px #3c475c;
    }
  }
}
</style>
